<template>
  <div class="systemAgent components-container">
    <!--=========头部=========-->
    <fns-header @search="queryList">
      <span slot="slot1">
          <el-form-item label="经手销售">
              <el-input v-model="header.saleUser" placeholder="请输入经手销售" clearable></el-input>
          </el-form-item>

          <el-form-item label="经纪人">
              <el-input v-model="header.brokerName" placeholder="请输入经纪人" clearable></el-input>
          </el-form-item>
         <el-form-item label="经手销售">
              <el-input v-model="header.saleUser" placeholder="请输入经手销售" clearable></el-input>
          </el-form-item>

          <el-form-item label="经纪人">
              <el-input v-model="header.brokerName" placeholder="请输入经纪人" clearable></el-input>
          </el-form-item>

      </span>
    </fns-header>

    <!--=======表格=======-->
    <div class="fns-table-handle">
      <el-button type="primary" size="medium" icon="el-icon-plus" @click="openBox('add')">导出</el-button>
    </div>
    <fns-table :customerField="customerField">
      <el-table-column
        slot="right"
        label="操作"
        align="center"
        width="80">
        <template slot-scope="scope">
          <el-tooltip content="修改" placement="top">
            <a @click="addBtn(scope.row, scope.$index)">
              <i class="el-icon-edit-outline"></i>
            </a>
          </el-tooltip>
        </template>
      </el-table-column>
    </fns-table>

    <!-- ========页码======-->
    <pages v-on:_pageChange="_pageChange" :total="total"></pages>

    <!--=======弹窗=======-->
    <div>
      <fns-dialog-lg :dialogLgData="dialogLgData" @submitForm="submitForm">
        <el-form class="main" id='formModel' ref="formModel" :model="formModel" :rules="rules" label-width="110px"  slot="body">
          <el-row>
            <el-col :span="11">
              <el-form-item label="密码：" prop="psd">
                <el-input v-model="formModel.psd" type="password" placeholder="请输入密码" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11" :offset="1">
              <el-form-item label="确认密码：" prop="confirmPsd">
                <el-input v-model="formModel.confirmPsd" type="password" placeholder="请输入密码" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="手机号：" prop="account">
                <el-input v-model="formModel.account" type="password" placeholder="请输入密码" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="单张图片显示：">
                <fns-look-img :imgSrc="imgSrc1"></fns-look-img>
              </el-form-item>
            </el-col>

            <el-col :span="11" :offset="1">
              <el-form-item label="多张图片显示：">
                <fns-look-img :imgSrc="imgSrc"></fns-look-img>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <fns-upload :uploadData="uploadData"></fns-upload>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <fns-upload :uploadData="uploadData1"></fns-upload>
            </el-col>
          </el-row>
        </el-form>
      </fns-dialog-lg>
    </div>

  </div>
</template>

<script>
  import { formaterTableData, initScrollTop } from '@/utils/publicMethod'
  import * as api from '@/api/system'
  import pages from '../../components/page/page' // 分页
  import fnsHeader from '@/components/header' // 头部
  import fnsDialogLg from '@/components/dialogLg' // lg 780px弹窗
  import fnsLookImg from '@/components/lookImg' // 查看图片
  import fnsTable from '@/components/table' // 表格
  import fnsUpload from '@/components/upload' // 上传图片
  import * as validate from '@/utils/validate' // 验证
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        imgSrc1: [
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4286086355,2603217620&fm=27&gp=0.jpg'
        ],
        imgSrc: [
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4286086355,2603217620&fm=27&gp=0.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527850289424&di=7e38edc693ad063587222ffa4f8ee37a&imgtype=0&src=http%3A%2F%2Fwww.kfzimg.com%2FG00%2FM00%2F9F%2F3B%2FoYYBAFR8XzqAC1GFAAE9V0eRTiI637_b.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528088613665&di=4eb3009448d322f45afac70c4b41006f&imgtype=0&src=http%3A%2F%2Fphoto.hanyu.iciba.com%2Fupload%2Fencyclopedia_2%2F4f%2F9b%2Fbk_4f9b192ce84b4df0900510257082ef43_2Cw7Vt.jpg'
        ],
        dialogLgData: { // 大号弹窗
          title: 'dialog',
          dialogVisible: false
        },
        uploadData: {
          label: '上传图片',
          limit: 10,
          listType: 'picture-card'
        },
        uploadData1: {
          label: '上传图片',
          limit: 1,
          listType: 'picture'
        },
        page: {
          index: 1,
          size: 10
        },
        loading: false,
        total: 0,
        header: { // 头部
          brokerName: '',
          saleUser: ''
        },
        customerField: { // 自定义表格字段
          tableData: [],
          loading: false,
          allField: [
            {
              prop: 'brokerName',
              label: '经纪人名称',
              align: 'center'
            },
            {
              prop: 'saleMode',
              label: '销售方式',
              formatter: this.formatterSaleMode,
              align: 'center'
            },
            {
              prop: 'salesBrand',
              label: '销售品牌',
              align: 'center'
            },
            {
              prop: 'placeArea',
              label: '销售省份',
              align: 'center'
            },
            {
              prop: 'contactName',
              label: '联系人姓名',
              align: 'center'
            },
            {
              prop: 'contactPhone',
              label: '联系电话',
              align: 'center'
            },
            {
              prop: 'saleUserName',
              label: '经手销售',
              align: 'center'
            },
            {
              prop: 'dealNums',
              label: '成交台数',
              align: 'center'
            },
            {
              prop: 'updatedOn',
              label: '修改时间',
              align: 'center'
            }
          ]
        },
        formModel: {
          account: '',
          psd: '',
          confirmPsd: ''
        },
        tableData: [],
        rules: {
          account: [
            validate.blur,
            validate.phone
          ],
          brokerName: [
            { required: true, message: '经纪人名称不能为空', trigger: 'blur' }
          ],
          psd: [
            validate.blur,
            { min: 6, max: 20, message: '密码长度为6到20位' }
          ],
          confirmPsd: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度为6到20位' }
          ]
        }
      }
    },
    components: {
      pages,
      fnsHeader,
      fnsTable,
      fnsDialogLg,
      fnsLookImg,
      fnsUpload
    },
    created() {
      this.queryList()
    },
    computed: {
      ...mapState({
        cityOptions: state => state.selecteData.city,
        areaOptions: state => state.selecteData.area,
        brandOptions: state => state.selecteData.brandOptions,
        companyTypeOptions: state => state.selecteData.companyType
      })
    },
    mounted() {
    },
    methods: {
      _pageChange(val, flag) {
        var arr = []
        if (flag === 'size') {
          this.page.index = val
          this.queryList()
        } else {
          arr.push(val)
          this.page.index = 1
          this.page.size = arr[0]
          this.queryList()
        }
      },
      // 打开弹窗
      addBtn() {
        this.dialogLgData.dialogVisible = true
        initScrollTop('formModel')
        if (this.$refs['formModel'] !== undefined) { // 重置表单及移除验证
          this.$refs['formModel'].resetFields()
        }
      },
      search() {
        this.page.index = 1
        this.queryList()
      },
      submitForm() {
        this.$refs['formModel'].validate((valid) => {
          if (valid) {
            this.dialogLgData.dialogVisible = false
          }
        })
      },
      queryList(params) {
        console.log('fnsDate1:', this.header.brokerName)
        console.log('fnsDate2:', this.header.saleUser)
        this.customerField.loading = true
        var pages = {
          index: this.page.index,
          size: this.page.size
        }
        var data = Object.assign({}, this.list, pages)
        api.brokerList(data).then((res) => {
          if (+res.code === 0) {
            this.tableData = formaterTableData(res.data.rows) // 格式化表格数据
            this.customerField.tableData = res.data.rows
            this.total = +res.data.total
            this.customerField.tableData.map((item, index) => {
              for (var i in item) {
                if (item[i] === null || '') {
                  item[i] = ' '
                }
              }
            })
          }
          this.customerField.loading = false
        }).catch(() => {
          this.customerField.loading = false
        })
      },
      formatterSaleMode(row) {
        var arr = row.saleMode.split(',') || ''
        var el = ''
        if (arr.length === 1) {
          if (+arr[0] === 0) {
            el += '零售'
          } else if (+arr[0] === 1) {
            el += '批售'
          }
        } else if (arr.length === 2) {
          el = '零售，批售'
        }
        return el
      }
    }
  }
</script>
<style lang="scss">
  .systemAgent {
    .fns-table-handle {
      text-align: right;
      margin-bottom: 20px;
      margin-top: -58px;
    }
  }
</style>
